<!--
 * @Description: 培训学员名册表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-02 17:16:23
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div class="mytable" v-loading="loading">
      <div class="table_title">培训学员名册表</div>
      <el-row class="gaugeOutfit">
        <el-col :span="8" style="padding-left:10px; line-height: 28px;"
          >培训班名称： <input type="text" v-model="dataForm.className"
        /></el-col>

        <el-col :span="8" style="padding-left:10px;line-height: 28px;"
          >培训机构：
          <input type="text" v-model="dataForm.pxjg" />
        </el-col>
        <el-col :span="8" style="padding-left:10px"
          >培训时间：
          <!-- <input type="text" v-model="dataForm.pxsj" /> -->
          <el-date-picker
            v-model="dataForm.pxsj"
            type="daterange"
            range-separator="~"
            value-format="yyyy-MM-dd"
            size="mini"
            style="width:70%"
          >
          </el-date-picker>
        </el-col>
      </el-row>

      <table>
        <tr  >
          <td rowspan="2" width="7%">
            序号
          </td>
          <td rowspan="2" width="7%">
            姓名
          </td>
          <td rowspan="2" width="20%">
            身份证号
          </td>
          <td rowspan="2" width="7%">学历</td>
          <td rowspan="2" width="10%">
            职称
          </td>
          <td rowspan="2" width="20%">所在单位</td>
          <td colspan="2" width="16%">
            培训成绩
          </td>
          <td rowspan="2">
            手机号码
          </td>
        </tr>
        <tr  >
          <td>理论</td>
          <td>实操</td>
        </tr>
        <tr   v-for="(item, index) in list" :key="index">
          <td><input type="text" v-model="item.xh" style="width:100%" /></td>
          <td><input type="text" v-model="item.xm" style="width:100%" /></td>
          <td><input type="text" v-model="item.sfzh" style="width:100%" /></td>
          <td><input type="text" v-model="item.xl" style="width:100%" /></td>
          <td><input type="text" v-model="item.zc" style="width:100%" /></td>
          <td><input type="text" v-model="item.dw" style="width:100%" /></td>
          <td><input type="text" v-model="item.ll" style="width:100%" /></td>
          <td><input type="text" v-model="item.sc" style="width:100%" /></td>
          <td>
            <input
              type="text"
              v-model="item.sj"
              style="width:100%"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            />
          </td>
        </tr>
      </table>

      <el-row class="gaugeOutfit_bottom">
        <el-col :span="12" style="padding-left:10px"
          >机构负责人： <input type="text" v-model="dataForm.jgfzr"
        /></el-col>

        <el-col :span="12" style="padding-left:10px"
          >班主任：
          <input type="text" v-model="dataForm.bzr" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {},
      list: []
    };
  },
  created() {},
  methods: {
    init(id) {
      this.loading = true;
      request({
        url: "/api/class_archives/generateA5/" + id+`?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
        // console.log(this.dataForm, 132);
        // 创建10位数组;
        this.list = Array.apply(null, { length: 10 }).map(() => {
          return {
            xh: "",
            xm: "",
            sfzh: "",
            xl: "",
            zc: "",
            dw: "",
            ll: "",
            sc: "",
            sj: ""
          };
        });
        if (this.dataForm.childrenVOList !== null) {
          // 获取数据数组长度
          let lgh = this.dataForm.childrenVOList.length;
          // 替换数组
          this.list.splice(0, lgh, ...this.dataForm.childrenVOList);
        }

        this.loading = false;
      });
    },
    exportWord() {
      this.dataForm.childrenVOList = this.list;
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key].forEach(item => {
            for (let key2 in item) {
              if (item[key2] == null) {
                item[key2] = "";
              }
            }
          });
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA5Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        // console.log(res, 123);
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "培训学员名册表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
// // 引入公共样式
// @import "./TABLESTYLE.scss";
.TISchedule {
  width: 100%;
  height: 78vh;
  overflow-y: auto;
  input {
    border: none;
    font-size: 14px;
  }
  .gaugeOutfit {
    margin-bottom: 5px;
  }
  .gaugeOutfit_bottom {
    margin-top: 5px;
  }
}
.mytable {
  width: 80%;
  margin: 0 auto;
  font-size: 14px;
  .table_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
    th {
      border: 1px solid #000;
      text-align: left;
      padding: 5px 10px;
    }
    td {
      border: 1px solid #000;
      text-align: center;
      vertical-align: middle;
      valign: middle;
      padding: 5px 10px;
    }
  }
}

::v-deep .el-date-editor {
  border: none;
  padding: 0;
  .el-range-input {
    text-align: left;
    width: 70px;
    color: #000;
  }
  .el-range-separator {
    line-height: 30px;
  }
}
::v-deep .el-range-editor {
  padding: 0 !important;
}
::v-deep .el-icon-date {
  display: none;
}
</style>
